<template>
    <div id="nav">
        <el-container>
            <el-main>
                <el-row>
                    <el-col :span="12">
                        <img :src="pic" alt="" class="logo">
                    </el-col>
                    <el-col :span="12">
                        <div class="list">
                            <router-link to="/">首页</router-link> |
                            <router-link to="/list">编程</router-link> |
                            <router-link to="/about">关于</router-link> 
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
   data(){
       return{
           pic:require("../assets/logo.jpg")
       }
   }
}
</script>

<style scoped>

#nav{
    background: #fff;
    font-weight: 700;
}

#nav .el-main{
    padding: 0 20px;
}

.logo{
    width: 200x;
    height: 70px;
}

.list{
    float: right;
}

.list a{
    display: inline-block;
    padding: 20px;
    color: #000;
    text-decoration: none;
}

.list a.router-link-exact-active{
    color: #3c31d4;
    border-bottom: 2px solid #3c31d4;
}
</style>